<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #imglist{
            width: 98%;
            padding: 10px;
            border: 3px solid #0a0;
        }
        #imglist img{
            width: 200px;
            height:100px;
            background: url('./imgs/loading.gif') no-repeat 50% 50%;
        }
        #imglist img.selected{
             border: 5px solid #f00;
             width: 190px;
             height: 90px;
        }
        .it{
            width: 600px;
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #999;
            padding: 0 30px;
            list-style: none;
        }
        .changecolor{
            background-color:  #f90;
        }
    </style>
    <script src="./jquery-1.8.3.min.js"></script>
</head>
<body>
    <h1>JQ 文档操作</h1>
    <hr>

    <div id="imglist">
        <img src="./imgs/Meinv001.jpg" title="pic1" data-img="o1">
        <img src="./imgs/Meinv002.jpg" title="pic2" data-img="o2">
        <img src="./imgs/Meinv003.jpg" title="pic3" data-img="o3">
        <img src="./imgs/Meinv004.jpg" title="pic4" data-img="o4">
        <img src="./imgs/Meinv005.jpg" title="pic5" data-img="o5">
    </div>

    <hr>
    <button>attr</button>

    <hr>
    <ul id="newslist">
        <li class="it">任何你洗的代码,超过6个月不去看它.当你再看时,都像是别人写的.</li>
        <li class="it">任何你洗的代码,超过6个月不去看它.当你再看时,都像是别人写的.</li>
        <li class="it">任何你洗的代码,超过6个月不去看它.当你再看时,都像是别人写的.</li>
        <li class="it">任何你洗的代码,超过6个月不去看它.当你再看时,都像是别人写的.</li>
        <li class="it">任何你洗的代码,超过6个月不去看它.当你再看时,都像是别人写的.</li>
        <li class="it">任何你洗的代码,超过6个月不去看它.当你再看时,都像是别人写的.</li>
        <li class="it">任何你洗的代码,超过6个月不去看它.当你再看时,都像是别人写的.</li>
        <li class="it">任何你洗的代码,超过6个月不去看它.当你再看时,都像是别人写的.</li>
        <li class="it">任何你洗的代码,超过6个月不去看它.当你再看时,都像是别人写的.</li>
        <li class="it">任何你洗的代码,超过6个月不去看它.当你再看时,都像是别人写的.</li>
    </ul>
   
    
    <script>
        $('button').click(function(){
            // 读取属性
            // console.log($('#imglist img.selected').prop('data-img'));
            // console.log($('#imglist img.selected').attr('data-img'));
            // 改属性值
            console.log($('#imglist img.selected').attr('src', './imgs/3.jpg'));
            // 移除属性
            $('#imglist img.selected').removeAttr('class');
            
        });
       

        // 选中效果,且只能选一张
        $('#imglist img').click(function (){
            $(this).addClass('selected').siblings('img').removeClass('selected');
        });

        // 划过事件
        // $('#newslist li').mouseover(function(){
        //     $(this).addClass('changecolor');
        // }).mouseout(function(){
        //     $(this).removeClass('changecolor');
        // });
        
        $('#newslist li').hover(function(){
            $(this).toggleClass('changecolor');
        });


    </script>
</body>
</html>